<template>
  <el-dialog v-drag2anywhere title="关联销项发票" :visible.sync="dialogVisible" width="1500px" :close-on-click-modal="false"
    append-to-body :modal-append-to-body="false" @close="dialogVisible=false">

    <el-form :model="filterData" ref="filterForm"  size="mini" label-width="75px">
      <el-row :gutter="20">
        <el-col style="width: 300px;">
          <el-form-item label="发票号码:">
            <el-input v-model="filterData.fphm" placeholder="销项发票号码" clearable></el-input>
          </el-form-item>
         </el-col>

         <el-col style="width: 240px;">
           <el-form-item label="税收分类:">
             <el-input v-model="filterData.taxname" placeholder="税收分类" clearable></el-input>
           </el-form-item>
          </el-col>

          <el-col style="width: 240px;">
            <el-form-item label="开票名称:">
              <el-input v-model="filterData.title" placeholder="开票名称" clearable></el-input>
            </el-form-item>
           </el-col>
           <el-col style="width: 240px;">
            <el-form-item label="规格型号:">
              <el-input v-model="filterData.title" placeholder="规格型号" clearable></el-input>
            </el-form-item>
           </el-col>
          <el-col style="width: 280px;">
            <el-form-item label="销方单位:">
              <el-input v-model="filterData.seller" placeholder="销方单位" clearable></el-input>
            </el-form-item>
           </el-col>
           <el-col style="width: 60px;">
             <el-form-item label="">
               <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
             </el-form-item>
           </el-col>
          </el-row>
          <el-row :gutter="20">
           <el-col style="width: 300px;">
             <el-form-item label="所属账套:">
               <el-input v-model="filterData.account" placeholder="所属账套" clearable></el-input>
             </el-form-item>
            </el-col>

      </el-row>
      <el-row>
        <el-col>
          <div style="line-height: 30px; text-align: right; height:30px; color: #00aaff;">溫馨提示:请根据实际情况勾选进项票</div>
          <div style="height: 400px; overflow-y: auto;border: 1px solid #E3E3E3; border-top: none;">
          <el-table :data="tableData" ref="tableData" border style="width: 100%;" @select-all="handleSelectionChange"  @select="handleSelectionChange" >
            <el-table-column label="选择" type="selection" width="45px" align="center"></el-table-column>
            <el-table-column label="开票日期" prop="date" width="140px"></el-table-column>
            <el-table-column label="发票号码" prop="fphm" width="160px"></el-table-column>
            <el-table-column label="货物名称或服务名称" prop="title" width="220px" show-overflow-tooltip>
              <template v-slot="scope">
                *{{scope.row.taxname}}*{{scope.row.title}}
              </template>
            </el-table-column>
            <el-table-column label="规格型号" prop="model" width="100px" show-overflow-tooltip ></el-table-column>
            <el-table-column label="单位" prop="unit" width="50" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="库存数量" prop="dcount" width="80" align="center"></el-table-column>
            <el-table-column label="单价" if="false" prop="price" align="right" width="120px" v-if="false">
              <template slot="header">
                <div style="text-align: center;">单价</div>
              </template>
            </el-table-column>
            <el-table-column label="金额" v-if="false" prop="total" v- align="center" width="95px"></el-table-column>
            <el-table-column label="税率" prop="rate" align="center" width="50px">
              <template v-slot="scope">
                {{scope.row.rate*100}}%
              </template>
            </el-table-column>
            <el-table-column label="税额" v-if="false" prop="tax" align="center" width="80px"></el-table-column>
            <el-table-column label="合计" prop="sum" align="center" width="95px"></el-table-column>
            <el-table-column label="类型" prop="type" width="50px">
              <template v-slot="scope">
                {{scope.row.type==1? "普票":(scope.row.type==2? "普票":(scope.row.type==3? "专票":"专票"))}}
              </template>
            </el-table-column>

            <el-table-column label="关联数量" align="center" width="140px">
              <template slot="header">
                <div style="color: #FF0000">关联数量</div>
              </template>
              <template v-slot="scope">
                <span v-if="!scope.row.dcheck">/</span>
                <el-input-number v-if="scope.row.dcheck" :precision="2" :step="0.01" :max="parseFloat(scope.row.dcount)" size="mini" style="width: 100%;" v-model="scope.row.readycount" placeholder="数量" @change="handleCountChange(scope.$index,scope.row)"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="关联金额" align="center" width="100px">
              <template v-slot="scope">
                {{parseFloat(scope.row.dsum).toFixed(2)}}
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" width="100px">
              <template slot="header">
                <div style="color: #FF0000">备注</div>
              </template>
              <template v-slot="scope">
                <span v-if="!scope.row.dcheck">/</span>
                <el-input v-if="scope.row.dcheck" type="textarea" :rows="1" v-model="scope.row.dmemo" placeholder="备注"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="购方名称" prop="buyer" show-overflow-tooltip></el-table-column>
          </el-table>
          </div>
          <div>
            <div style="height: 30px; line-height: 30px;">选中项总金额: {{sum_select}}</div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right;">
      <el-pagination layout=" prev, pager,next,sizes,total" :total="numrows" :page-size="pagesize"
        :current-page="curpage" prev-text="上一页"  next-text="下一页"  :page-sizes="[10, 20, 30]" @size-change="handleSizeChange" @current-change="handleCurrentChange" ></el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium" @click="handleSave" :disabled="selection.length<=0">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default{
    data(){
      return{
        filterData:{
          title:'',
          num:'',
          model:'',
          supname:''
        },
        sum_select:0,
        numrows:1,
        curpage:1,
        pagesize:10,
        selection:[],
        tableData:[],
        dialogVisible:false
      }
    },
    methods:{
      handleCountChange(index,data){
        this.tableData[index].dsum=parseFloat((data.price*data.readycount)+(data.price*data.rate*data.readycount)).toFixed(2);
      },
      init(index,data){

        this.loadDataList();
      },
      handleSelectionChange(selection){
        console.log(this.selection);
        this.selection=selection;

        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i].dcheck = false;
        }
        this.sum_select=0;
        for (var i = 0; i < selection.length; i++) {
          var index = this.tableData.indexOf(selection[i]);
          this.tableData[index].dcheck = true;
          this.tableData[index].dsum=parseFloat((this.tableData[index].price*this.tableData[index].readycount)+(this.tableData[index].price*this.tableData[index].rate*this.tableData[index].readycount)).toFixed(2);
          this.sum_select+=parseFloat(this.tableData[index]["dsum"]);
        }

        this.sum_select=parseFloat(this.sum_select).toFixed(2);


      },
      loadDataList(){
        const params={
          title:this.filterData.title,
          model:this.filterData.model,
          taxname:this.filterData.taxname,
          fphm:this.filterData.fphm,
          seller:this.filterData.seller,
          account:this.filterData.account,
          curpage:this.curpage,
          pagesize:this.pagesize
        }
        this.axios.post("api/admin/orderdetail/popup_unbind_saleticket", params).then(res => {
          if (res.status == 200 && res.data.code) {
            this.tableData = res.data.list;
            this.numrows=res.data.numrows;
          }
        })
      },
      handleSearch(){
        this.curpage=1;
        this.loadDataList();
      },
      handleSave(){
        //获取已经选中数据
        const list=[];
        this.tableData.forEach((item)=>{
          if(item["dcheck"]){
            list.push(item);
          }
        })
        this.$emit("completeHandler",this.selection);
        this.dialogVisible=false;
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
    }
  }
</script>

<style>
</style>
